import Vue from 'vue'
import Vuex from 'vuex'
import sys from './system'
import user from './user'

Vue.use(Vuex);
const store = new Vuex.Store({ //声明一个vuex store
    modules: {  //使用modules进行状态树划分，避免对象结构过于臃肿；每个状态树都包含自己的state,action，mutation 和 getter
        sys,
        user
    }
})
/**
 *  使用Vuex作为状态管理容器，主要用于解决：
 *   - 多个视图依赖于同一状态（变量）。
 *    - 来自不同视图的行为需要变更同一状态（变量）。 
 *  Vuex将这些状态（变量）抽取出来以单例的形式管理，任何组件都可以获取状态或触发行为；
 *   简单的描述状态操作的流程：
 *   components ————> dispatch(action) 
 *   action  ————>  mutations
 *   mutations  ————> state
 *   state  ————> components
 *   组件通过dispatch方法调用action， action commit一个mutations,  mutations 更改 state, state修改通知components重新渲染
 */
export default store